<template>
	<view class="content">
		<view class="card">
			<input class="input bottom-divider" placeholder="姓名"/>
			<input class="input bottom-divider" placeholder="手机号码"/>
			<input class="input bottom-divider" placeholder="地区" @click="showAddressPicker"/>
			<textarea class="textarea" placeholder="详细地址: 如道路、门牌号、小区、楼栋号、单元室等"></textarea>
		</view>
		<view class="card">
			<view class="default flexr justify-spacebwt align-center">
				<text>设为默认地址</text>
				<switch color="#36bba5"></switch>
			</view>
		</view>
		<view class="primary-button">
			保存
		</view>
		
		<uni-popup ref="addressPickerRef"
			type="bottom" background-color="#fff"
			border-radius="30rpx" :mask-click="false">
			<myAddressPicker
				@onCancel="onCancelAddressPicker"
				@onConfirm="onConfirmAddressPicker"
			></myAddressPicker>
		</uni-popup>
	</view>
</template>

<script setup>
import { onLoad, onShow } from '@dcloudio/uni-app'
import myAddressPicker from '@/subpages/widgets/myAddressPicker.vue';
import { ref } from 'vue';
const addressPickerRef = ref(null)
onLoad((options) => {
	uni.setNavigationBarTitle({
		title: '新增地址'
	})
})
function showAddressPicker() {
	addressPickerRef.value?.open()
}
function onCancelAddressPicker() {
	addressPickerRef.value?.close()
}
function onConfirmAddressPicker() {
	addressPickerRef.value?.close()
}
</script>

<style lang="scss">
.content {
	padding-top: 32rpx;
	padding-left: 32rpx;
	padding-right: 32rpx;
	.card {
		background-color: white;
		border-radius: 15rpx;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		align-self: stretch;
		.input {
			height: 96rpx;
			font-size: 28rpx;
			color: $text-color1;
			padding: 0 32rpx;
		}
		.textarea {
			font-size: 28rpx;
			color: $text-color1;
			padding: 32rpx 32rpx;
			align-self: stretch;
			width: auto;
			height: 150rpx;
		}
		.default {
			height: 96rpx;
			min-height: 96rpx;
			font-size: 28rpx;
			color: $text-color1;
			padding: 0 32rpx;
		}
	}
	.card + .card {
		margin-top: 32rpx;
	}
	.primary-button {
		margin-top: 64rpx;
	}
}
</style>
